<template>
  <div class="page-wrapper">
    <c-card title="通信告警列表" class="alarm-list">
      <div class="search-row">
        <div>
          <div class="item">
            <label>状态</label>
            <el-select v-model="status" size="small" @change="_getAlarms">
              <el-option label="全部" value></el-option>
              <el-option v-for="(s, i) in statusList" :key="i" :value="i" :label="s"></el-option>
            </el-select>
          </div>
          <div class="item">
            <label>选择日期</label>
            <el-date-picker
              v-model="dateOpt"
              type="daterange"
              align="right"
              size="small"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="_getAlarms"
            ></el-date-picker>
          </div>
          <div class="item">
            <label>客户</label>
            <el-select v-model="clientId" clearable size="small" @change="clientsDate">
              <el-option v-for="c in clients" :key="c.pkid" :value="c.pkid" :label="c.name"></el-option>
            </el-select>
          </div>
          <div class="item">
            <label>站点</label>
            <el-select v-model="substationId" clearable size="small" @change="_getAlarms">
              <el-option v-for="c in simpleList" :key="c.substationId" :value="c.substationId" :label="c.name"></el-option>
            </el-select>
          </div>
          <!-- <el-button size="small" class="item" @click="_getAlarms()">查询</el-button> -->
        </div>
      </div>
      <el-table ref="table" v-loading="loading" :data="list" style="width: 100%">
        <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" label="客户/公司名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="stationName" label="站点名称"></el-table-column>
        <el-table-column prop="etime" label="告警时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="staus" label="状态">
          <template v-slot="{row}">{{ statusList[row.status] }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row, $index}">
            <el-button size="small" type="text" @click="showDlg(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page.sync="page.index"
          :total="page.total"
          @current-change="_getAlarms('not')"
        ></el-pagination>
      </div>
    </c-card>
    <alarm-detail :visible.sync="visible" :alarm="curAlarm" />
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import AlarmDetail from "./Components/AlarmDetail";
import { parseTime, compareTime, calcPageNum } from "@/utils";
const now = parseTime(Date.now(), "{y}-{m}-{d}");
export default {
  name: "CommAlarm",
  components: {
    CCard,
    AlarmDetail
  },
  data() {
    return {
      loading: true,
      visible: false,
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      dateOpt: null,
      clientId: null,
      status: 0,
      list: null,
      curAlarm: null,
      statusList: ["未处理", "取消", "确认", "派单"],
      clients: null,
      pickerOptions: {
        disabledDate: function(v) {
          return compareTime(v, now) >= 0;
        }
      },
      simpleList: [],
      substationId: '',
    };
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);

    this._getAlarms();
    this.getClients();
  },
  methods: {
    // 客户Id获取站点
    clientsDate(id) {
      this.IsDisplay = true
      this._getAlarms()
      return this.$axios
        .get("/plat/sys/substation/simpleList", {
          params: {
            clientId: id
          }
        })
        .then(res => {
          if (res.code === 1) {
            console.log('4', res.data)
            this.simpleList = res.data
            this.substationId = res.data.substationId
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    },
    _getAlarms() {
      const params = {
        page: this.page.index,
        rows: this.page.size,
        startTime: this.dateOpt && this.dateOpt[0],
        endTime: this.dateOpt && this.dateOpt[1],
        clientId: this.clientId,
        substationId: this.substationId, // 站点ID
        type: [5, 6, 7, 8].join(",")
      };
      this.status !== "" && (params.status = this.status);
      this.loading = true;
      return this.$axios
        .get("/fes/alarm/queryAmList", { params })
        .then(res => {
          if (res.code === 1) {
            this.list = res.data.rows;
            this.$set(this.page, "total", res.data.total);
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    getClients() {
      return this.$axios
        .get("plat/work/drop/sys_client")
        .then(res => {
          if (res.code === 1) {
            this.clients = res.data;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    },
    showDlg(row) {
      this.curAlarm = row;
      this.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

